import { Button, StyleSheet, View, Text } from 'react-native';
import React, { useState } from 'react';
import { BarCodeReadEvent, RNCamera } from 'react-native-camera';
import { TestSuite, TestCase, Tester } from '@rnoh/testerino';

export function onBarCodeReadTest() {
  const [barcodeResultText, setbarcodeResultText] = React.useState<string>("");
 
  return (
    <Tester>
      <TestSuite name="onBarCodeRead">
        <TestCase itShould={`onBarCodeRead`}>
        <Text>result：{barcodeResultText}</Text>
          <RNCamera
            ref={ref => {
              this.camera = ref;
            }}
            style={style.cameraPreview}
            onBarCodeRead={(event:BarCodeReadEvent)=>{
                setbarcodeResultText(JSON.stringify(event))
            }}
          >
          </RNCamera>
        </TestCase>
      </TestSuite>
    </Tester >
  );
}

const style = StyleSheet.create({
  cameraPreview: { width: '100%', aspectRatio: 56 / 100 },
  actionBtn: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-evenly',
    padding: 10,
    gap: 5,
    position: 'absolute',
    top: 300,
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    color: '#000',
  },
  flipText: {
    color: 'white',
    fontSize: 15,
  },
  flipButton: {
    flex: 0.3,
    height: 40,
    marginHorizontal: 2,
    marginBottom: 10,
    marginTop: 10,
    borderRadius: 8,
    borderColor: 'white',
    borderWidth: 1,
    padding: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  zoomText: {
    position: 'absolute',
    bottom: 70,
    zIndex: 2,
    left: 2,
  },
});
